<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--使用CDN方式引入vue-->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.4/vue.min.js"></script>
</head>
<body>
<h1>数据渲染和指令</h1>
<hr>
<!-- id标识vue作用的范围 -->
<!-- 如果要将模型数据绑定在html属性中，则使用 v-bind 指令
 此时title中显示的是模型数据
-->
<div id="app" v-bind:title="mytitle">
    <!-- {{}} 插值表达式，绑定vue中的data数据 -->
    {{msg}}
</div>

<!--v-bind指令，也可以简写为一个：冒号。-->
<!--
<div id="app" :title="mytitle">
  {{msg}}
</div>
-->

<script>
    // 创建一个vue对象
    let vm = new Vue({
        el: '#app',//绑定vue作用的范围,el是element的简写。
        data: {//定义页面中显示的模型数据或者说为属性
            msg:'Hello,Vue!',
            mytitle:'move your mouse here! 现在是:'+new Date().toLocaleString()
        }
    })
</script>
</body>
</html>
